<template>
<section class="statistics hidden-sm-and-down">
  <div class="statistics-inner">
    <h2 class="title">只为追求更好</h2>
    <el-row>
      <el-col :span="6">
        <div class="item">
          <h3 title="+">82,692</h3>
          <p>图片模板427,408个，Gif模板15,086个</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="item">
          <h3 title="+">3,000</h3>
          <p>每日更新精品模板</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="item">
          <h3 title="人">863,722</h3>
          <p>选择了图一波</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="item">
          <h3 title="+">1,475</h3>
          <p>企业</p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="6">
        <div class="feature">
          <i class="el-icon-picture-outline-round" title="免费商业"></i>
          <div>
            <h3>免费商业</h3>
            <p>长期提供免费高清商业图片</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="feature">
          <i class="el-icon-position" title="高速下载"></i>
          <div>
            <h3>高速下载</h3>
            <p>海量素材快速下载不限网络速度</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="feature">
          <i class="el-icon-receiving" title="海量素材"></i>
          <div>
            <h3>海量素材</h3>
            <p>千万级素材保证有你喜欢</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="feature">
          <i class="el-icon-mouse" title="设计精选"></i>
          <div>
            <h3>设计精选</h3>
            <p>设计大咖热门推荐素材库</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</section>
</template>

<script>
export default {
  name: 'Statistics',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.statistics {
    padding: 0 16px;
    margin-bottom: 80px;
    margin-top: 60px;
    .statistics-inner {
        max-width: 1380px;
        margin: 0 auto;
        h3 {
            font-weight: 600;
            font-size: 22px;
            margin-bottom: 5px;
            padding-bottom: 5px;
            line-height: 1;
        }
        .title {
            font-size: 24px;
            text-align: center;
            font-weight: 600;
            margin-bottom: 30px;
            position: relative;
            &::after {
                position: absolute;
                bottom: -4px;
                width: 6em;
                left: 50%;
                margin-left: -3em;
                content: "";
                border-bottom: 3px solid @color-text-primary;
            }
        }
        .el-row {
            margin-bottom: 30px;
        }
        .item {
            text-align: center;
            margin-bottom: 32px;
            h3 {
                display: inline-block;
                position: relative;
                border-bottom: 3px solid @color-text-primary;
                &:after {
                    position: absolute;
                    content: attr(title);
                    right: -24px;
                    bottom: 5px;
                    font-size: 12px;
                    font-weight: lighter;
                }
            }
            p {
                color: @color-subsidiary;
            }
        }
        .feature {
            display: flex;
            align-items: center;
            padding: 24px;
            border-radius: 12px;
            border: 1px solid @color-border;
            > i {
                font-size: 50px;
                color: @color-subsidiary;
            }
            > div {
                flex: 1;
                margin-left: 15px;
                p {
                    font-size: 12px;
                    color: @color-subsidiary;
                }
            }
        }
    }
}
</style>
